<section id="dashboard-view" class="mainbar">
    <section class="matter">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="today-datas">
                        <li class="borange">
                            <div class="pull-left"><i class="fa fa-coffee"></i></div>
                            <div class="datas-text pull-right">
                                <a href="http://www.gulpjs.com"><span class="bold">Gulp</span></a>
                            </div>
                            <div class="clearfix"></div>
                        </li>

                        <li class="bviolet">
                            <div class="pull-left"><i class="fa fa-users"></i></div>
                            <div class="datas-text pull-right">
                                <span class="bold">{{vm.customers.length}}</span> Customers
                            </div>
                            <div class="clearfix"></div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="row">
                    <div class="widget wblue">
                        <div ht-widget-header title="Recent Customers"
                             allow-collapse="true"></div>
                        <div class="widget-content text-center text-info">
                            <div class="container">
                                 <ul class="row image-group">
                                      <li ng-repeat="c in vm.customers | limitTo:12 | orderBy:'name'"
                                        ng-click="vm.gotoCustomer(c)"
                                        class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
                                        <div class="user" title="Go to speaker details">
                                            <img ht-img-person="{{c.thumbnail}}"
                                                class="img-thumbnail stacked">
                                            <div>
                                                <small>{{c.firstName}}</small>
                                            </div>
                                            <div>
                                                <small>{{c.lastName}}</small>
                                            </div>
                                        </div>

                                      </li>
                                 </ul>
                            </div>
                        </div>
                        <div class="widget-foot">
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
